<template>
  <div>
    <a-table :key="tableName" rowKey="processNo" bordered size="small" :dataSource="dataList" :columns="columns"  :scroll="{x: 1000}"  :pagination="false"  :rowSelection="{selectedRowKeys: selectedRowKeyLists,getCheckboxProps: checkboxProps,onChange: onSelectChange,  fixed: 'left'}" :rowClassName="rowClassName" @resizeColumn="handleResizeColumn">
      <template #bodyCell="{ record,column}">
        <template v-if="column.key === 'status'">
          {{column}}
        </template>
        <template v-if="column.key === 'stationNo'">
          <span v-if="record.stationNo != 0" >{{record.lineNo}}-{{record.stationNo}} </span>
          <span v-else >/</span>
        </template>

        <template v-if="column.key === 'processName'">
          <span>{{ record.processName }}
          <span v-if="record.rework &&  record.reworking"><a-tag color="warning">{{ $t('other.inBack') }}</a-tag></span>
          <span v-else-if="record.rework && !record.reworking">（{{  $t('other.backDone') }}）</span>
          </span>
        </template>

      </template>
    </a-table>
  </div>
</template>
<script setup name="makeDetailTable">
// import { computed } from 'vue'
import { hangerDetailsColumns } from './hangerInfoConfig'
import {ref,watch} from "vue";
const emits = defineEmits(['reOk'])

let selectedRowKeyLists = ref([])
let selectionRowLists = ref([])
let dataList = ref([])

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => []
  },
  tableName: {
    type: String,
    default: () => 'hangerDetails'
  }
})
const rowClassName = (record) => {
  if (record.completed &&  !(record.rework)) {
    return 'trBackgroundColor'
  }
  if (record.rework) {
    return 'trWorkingBackgroundColor'
  }
}
const onSelectChange = (selectedRowKeys, selectionRows) => {
  // console.log(selectedRowKeys, selectionRows)
  selectedRowKeyLists.value = selectedRowKeys
  selectionRowLists.value = selectionRows
  emits('reOk',selectedRowKeyLists.value);
}
const checkboxProps = (record) => {
    return {disabled: !record.listIndex || record.rework || !record.completed }
}
const columns = ref(hangerDetailsColumns)

const handleResizeColumn = (w, col) => {
  col.width = w;
}
watch(() => props.dataSource, (newVal) => {
  if (newVal) {
    dataList.value = newVal
  }
}, { deep: true, immediate: true })

// const columns = computed(() => {
//   return  hangerDetailsColumns
// })
</script>
